<template>
  <div>
    <br>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">活动管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>
    <br><br>
    <el-badge :value="100" :max="99" class="like_item">
      <el-button size="small">评论</el-button>
    </el-badge>

    <el-badge value="new" :hidden="false" class="like_item" type="danger">
      <el-button size="small">评论</el-button>
    </el-badge>
    <br><br>
    <el-checkbox v-model="checked1" true-label="1" false-label="2">选项1</el-checkbox>
    <el-checkbox v-model="checked2" true-label="1" false-label="2">选项2</el-checkbox>
    <el-checkbox v-model="checked3" true-label="1" false-label="2" disabled>选项3</el-checkbox>
    <br><br>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    <br><br>
    <el-button :plain="true" @click="open1">消息</el-button>
    <el-button :plain="true" @click="open2">成功</el-button>
    <el-button :plain="true" @click="open3">警告</el-button>
    <el-button :plain="true" @click="open4">错误</el-button>
    <br><br>
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        property="date"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        property="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        property="address"
        label="地址">
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
      <el-button @click="setCurrent()">取消选择</el-button>
    </div>
    <br><br>
    <Comment></Comment>
    <br><br>
    <!--    <HelloWorld></HelloWorld>-->

    <dl style="border: 1px solid #DDDDDD; margin: 10px">
      <dt style="background: #E6ECF2; font-size: 12px; padding: 10px 0 10px 10px">测试：</dt>
      <dd style="font-size: 12px; color: #666666; padding: 10px; text-indent: 2px;">
        <dl style="border: 1px solid #DDDDDD; margin: 10px">
          <dt style="background: #E6ECF2; font-size: 12px; padding: 10px 0 10px 10px">测试：</dt>
          <dd style="font-size: 12px; color: #666666; padding: 10px; text-indent: 2px;">1231</dd>
        </dl>
        123
      </dd>
    </dl>

    <dl style="border: 1px solid #DDDDDD; margin: 10px">
      <dt style="background: #E6ECF2; font-size: 12px; padding: 10px 0 10px 10px">测试：</dt>
      <dd style="font-size: 12px; color: #666666; padding: 10px; text-indent: 2px;">
        <dl style="border: 1px solid #DDDDDD; margin: 10px">
          <dt style="background: #E6ECF2; font-size: 12px; padding: 10px 0 10px 10px">测试：</dt>
          <dd style="font-size: 12px; color: #666666; padding: 10px; text-indent: 2px;">
            <dl style="border: 1px solid #DDDDDD; margin: 10px">
              <dt style="background: #E6ECF2; font-size: 12px; padding: 10px 0 10px 10px">测试：</dt>
              <dd style="font-size: 12px; color: #666666; padding: 10px; text-indent: 2px;">1231</dd>
            </dl>
            123
          </dd>
        </dl>
      </dd>
    </dl>

    <el-button :plain="true" @click="scrollToTop()">返回顶部</el-button>

  </div>
</template>

<script>
import Comment from '../../components/Comment.vue'
import HelloWorld from "../../components/HelloWorld.vue";

export default {
  name: "ElementDemo",
  components: {
    Comment,
    HelloWorld
  },
  data() {
    return {
      checked1: '1',
      checked2: '2',
      checked3: '1',
      checkList: ['复选框 B', '选中且禁用'],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      currentRow: null
    }
  },
  async mounted() {
    await this.setCurrent(this.tableData[0])
  },
  methods: {
    open1() {
      this.$message({
        duration: 10000,
        message: '这是一条消息提示'
      });
    },

    open2() {
      this.$message({
        showClose: true,
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },

    open3() {
      this.$message({
        showClose: true,
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      });
    },

    open4() {
      this.$message.error('错了哦，这是一条错误消息');
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log('cur', this.currentRow)
    },
    scrollToTop() {
      // 开个定时器返回顶部时缓慢优雅一些，是 document.documentElement.scrollTop = 0 的升级版
      const timer = setInterval(() => {
        // 页面顶部卷去高度
        let scrollTop = document.documentElement.scrollTop
        // 高度控速 = 页面顶部卷去高度正值 / n ===> n 越大，返回越慢
        let ispeed = Math.floor(-scrollTop / 5);
        // 页面顶部卷去高度 + 高度控速 ===> 和不为零，定时器一直开启（不明白的同志可以尝试同时打印 scrollTop 和 ispeed）
        document.documentElement.scrollTop = scrollTop + ispeed;
        // 页面顶部卷去高度 + 高度控速 ===> 和为零返回顶部，清除定时器
        if (scrollTop === 0) {
          clearInterval(timer);
        }
      }, 20)

      console.log('123-->', 123);
    }
  }
};
</script>

<style>
.like_item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>

